import {
  FooterToolbar,
  PageContainer,
  ProForm,
  ProFormDateTimePicker,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { history, useLocation } from '@umijs/max';
import { Button, Card, Col, Row } from 'antd';
import React, { useEffect, useState } from 'react';
import Flow from './components/Flow';
import SearchTree from './components/SearchTree';
import './index.less';
const technologyRouteSave: React.FC = () => {
  const location = useLocation();
  const [isShowFooter, setIsShowFooter] = useState(true);
  useEffect(() => {
    // 底部操作栏因为是在body上挂载的,导致无法销毁 这里手动隐藏
    if (location.pathname === '/technology/technologyRoute/technologyRouteSave') {
      setIsShowFooter(true);
    }
    return () => {
      setIsShowFooter(false);
    };
  }, [location.pathname]);
  // 返回
  const handleBack = () => {
    history.replace('/technology/technologyRoute');
  };
  return (
    <PageContainer style={{ overflow: 'hidden' }}>
      <Row gutter={2} className={'scene-linkage-content'}>
        <Col span={6}>
          <Card style={{ height: '100%' }} bodyStyle={{ padding: '6px 2px', height: '100%' }}>
            <SearchTree></SearchTree>
          </Card>
        </Col>
        <Col span={18}>
          <Card>
            <ProForm
              layout="horizontal"
              submitter={{
                render: (_, dom) =>
                  isShowFooter && (
                    <FooterToolbar>
                      {[
                        <Button key={111222} onClick={handleBack}>
                          返回
                        </Button>,
                        ...dom,
                      ]}
                    </FooterToolbar>
                  ),
              }}
              onFinish={async (values) => console.log(values)}
            >
              <ProForm.Group size={'small'}>
                <ProFormText name="name1" label="工艺路线编码" placeholder="请输入" />
                <ProFormText name="name2" label="工艺路线名称" placeholder="请输入" />
                <ProFormText name="name3" label="版本" placeholder="请输入" />
                <ProFormText name="name3333" label="产品编码" placeholder="请输入" />
                <ProFormText name="name33133" label="产品名称" placeholder="请输入" />
                <ProFormText name="name1133" label="状态" placeholder="请输入" />
                <ProFormText name="name11133" label="创建人" placeholder="请输入" />
                <ProFormDateTimePicker name="name6" label="创建时间" />
                <ProFormUploadButton label="工艺上传" name="file" title="上传文件" />
                {/* 注意: 支持 ant 原生属性的 都是在fieldProps属性写 */}
                <ProFormTextArea
                  fieldProps={{
                    rows: 2,
                  }}
                  width="md"
                  name="name11133"
                  label="说明"
                  placeholder="请输入"
                />
              </ProForm.Group>
            </ProForm>
            <Card bodyStyle={{ padding: 0 }}>
              {/* 画布 */}
              <Flow></Flow>
            </Card>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default technologyRouteSave;
